<!doctype html>
<jsp:directive.page language="java"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" />
<html>
	<head>
		<%@ include file="/commons/includes/taglib.jspf"%>
		<%@ include file="/commons/includes/meta.jspf"%>
		<title><fmt:message key="page.title.bg" /></title>
		<script type="text/javascript" src="<c:url value="/commons/scripts/jquery-1.3.2.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="/commons/scripts/botton.js" />"></script>
		<link rel="stylesheet" type="text/css"
			href="<c:url value="/commons/styles/css_login.css" />"></link>
		<link rel="stylesheet" type="text/css"
			href="<c:url value="/commons/styles/default.css" />"></link>
		<script language="javascript">
		var contextPath='${contextPath}';
			function init()
			{
				if(top.location!=location)
				top.location.href = location.href;
			}
			jQuery(document).ready(
					function($) {
						var $loginForm = $('form[name="loginForm"]');
						$("#btnLogin").click(function(event) {
							if (!$("#username").val()) {
								alert("请输入用户名！");
								$("#username").focus();
								return;
							}
							if (!$("#password").val()) {
								alert("请输入密码！");
								$("#password").focus();
								return;
							}
							if (!$("#verifycode").val()) {
								alert("请输入验证码！");
								return;
							}
							$loginForm.submit();
						});

						jQuery('#verifycode').focus(
								function() {
									jQuery('#divVryPic').show();
									if (jQuery('#divVryPic img').attr('src') == '') {
										jQuery('#divVryPic img').attr(
												'src',
												contextPath+'/user/verifyPic.shtml?random='
														+ Math.random());
									}
								});
						jQuery('#verifycode')
								.blur(
										function() {
											if (jQuery(document.activeElement).attr(
													'id') != 'divVryPic') {
												jQuery('#divVryPic').hide();
											}
										});
						jQuery('#divVryPic')
								.blur(
										function() {
											if (jQuery(document.activeElement).attr(
													'id') != 'verifycode') {
												jQuery('#divVryPic').hide();
											}
										});
						jQuery('#divVryPic img').click(function() {
							jQuery(this).attr('src', '');
							jQuery('#verifycode').focus();
						});

						jQuery('#username, #password').keydown(function(event) {
							if (event.keyCode == 13) {
								window.event.keyCode = 9;
							}
						});
						jQuery('#verifycode').keydown(function(event) {
							if (event.keyCode == 13) {
								jQuery('#btnLogin').click();
							}
						});
					});
	</script>
	</head>
	<body onload="init()">
		<form name="loginForm" method="post"
			action="<c:url value="/security_login" />">
			<table width="100%" height="100%">
				<tr>
					<td rowspan="3" class="bg1">
						&nbsp;
					</td>
					<td width="580" height="116"
						style="background: url('<c:url value="/commons/images/login_12.jpg" />') no-repeat;">
					</td>
					<td rowspan="3" class="bg2">
						&nbsp;
					</td>
				</tr>
				<tr>
					<td height="330" align="left" valign="top">
						<table width="580">
							<tr>
								<td colspan="3" width="580" height="125"
									style="background: url('<c:url value="/commons/images/login_1.jpg" />') no-repeat;">
								</td>
							</tr>
							<tr>
								<td width="224" height="205"
									style="background: url('<c:url value="/commons/images/login_2.jpg" />') no-repeat;">
								</td>
								<td width="188">
									<table width="188">
										<tr>
											<td width="188" height="34"
												style="background: url('<c:url value="/commons/images/login_3.jpg" />') no-repeat;">
											</td>
										</tr>
										<tr>
											<td>
												<table width="188"
													style="background: url('<c:url value="/commons/images/login_8.jpg" />') no-repeat #6da3d2;">
													<tr>
														<td width="18" height="15"
															style="background: url('<c:url value="/commons/images/login_4.jpg" />') no-repeat;">
															&nbsp;
														</td>
														<td width="170" class="dropshadow">
															后台管理系统
														</td>
													</tr>
												</table>
											</td>
										</tr>
										<tr>
											<td width="188" height="9"
												style="background: url('<c:url value="/commons/images/login_5.jpg" />') no-repeat;">
											</td>
										</tr>
										<tr>
											<td height="77"
												style="background: url('<c:url value="/commons/images/login_9.jpg" />') no-repeat;">
												<table width="160" align="center" cellspacing="4">
													<tr>
														<td width="45"
															style="background: url('<c:url value="/commons/images/login_01.jpg" />') no-repeat;">
														</td>
														<td>
															<input name="username" type="text" class="input1"
																id="username" onFocus="this.className='input11'"
																onBlur="this.className='input1'" value="">
														</td>
													</tr>
													<tr>
														<td
															style="background: url('<c:url value="/commons/images/login_02.jpg" />') no-repeat;">
														</td>
														<td>
															<input name="password" type="password" class="input1"
																id="password" onFocus="this.className='input11'"
																onBlur="this.className='input1'" value="">
														</td>
													</tr>
													<tr>
														<td
															style="background: url('<c:url value="/commons/images/login_03.jpg" />') no-repeat;">
														</td>
														<td>
															<div id="divVryPic">
																<img id="verifyImg" title="点击更换验证码"
																	style="cursor: pointer;" />
															</div>
															<input class="input1" type="text" id="verifycode"
																name="verifycode" style="width: 70px;" />
														</td>
													</tr>
												</table>
											</td>
										</tr>
										<tr>
											<td width="188" height="70"
												style="background: url('<c:url value="/commons/images/login_6.jpg" />') no-repeat;">
											</td>
										</tr>
									</table>
								</td>
								<td width="168">
									<table width="168" height="205">
										<tr>
											<td width="168" height="58" colspan="3"
												style="background: url('<c:url value="/commons/images/login_7_1.jpg" />') no-repeat;">
											</td>
										</tr>
										<tr>
											<td width="30" height="87"
												style="background: url('<c:url value="/commons/images/login_7_2.jpg" />') no-repeat;">
											</td>
											<td width="73" height="89"
												style="background: url('<c:url value="/commons/images/login_7_b2.jpg" />') no-repeat;">
												<a href="#" onClick="this.blur();return false;"
													id="btnLogin"><input type="image" id="login"
														src='<c:url value="/commons/images/login_7_b1.jpg" />'
														border="0" width="73" height="87"
														style="filter: alpha(opacity =     100); -moz-opacity: 1;"
														onMouseOver="bt['login']=true;ov('login')"
														onMouseOut="bt['login']=false;out('login')" onclick="return false;">
												</a>
											</td>
											<td width="65" height="87"
												style="background: url('<c:url value="/commons/images/login_7_4.jpg" />') no-repeat;">
											</td>
										</tr>
										<tr>
											<td width="168" height="58" colspan="3"
												style="background: url('<c:url value="/commons/images/login_7_5.jpg" />') no-repeat;">
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td class="bg3">
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>